<template>
  <view class="uni-margin-wrap">
    <swiper
      class="swiper"
      v-if="list.length > 0"
      circular
      :display-multiple-items="1"
      previous-margin="30px"
      next-margin="20px"
      :current="current"
      @change="SwiperChange"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="filLists" @click="itemClick(index, item.id)">
          <image :src="item.image" class="filLists_img"></image>
          <view class="filLists1">
            <view class="filLists2">
              <image src="../../static/filling/icon1.png"></image>
              <text>{{ item.name }}</text>
            </view>
            <view>
              <text>{{ item.distance }}</text>
            </view>
            <view>{{ item.address }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="filling" v-if="list.length < 1">
      <image :src="fillder1"></image>
      <text>暂无加注机</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref} from 'vue';
import { fillder1 } from '@/utils/Static';
  const props = defineProps({
      /**
       * 图片url列表
       */
      list: {
        type: Array,
        default: [],
      },
      /**
       * swiper高度
       */
      height: {
        type: Number,
        default: 690,
      },
       current: {
        type: Number,
        default: 0,
      }
  });

  const emit = defineEmits(['change','tabChange']);
  function SwiperChange(e){
   props.current=e.detail.current
   emit('change', e.detail.current);
  }
  function  itemClick(idx, id) {
     emit('tabChange', id);
  }
</script>

<style lang="scss">
.swiper {
  height: 190rpx;
}
.filling {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 360rpx;
  width: 100%;
  background-color: white;
  image {
    width: 200rpx;
    height: 150rpx;
    margin-bottom: 20rpx;
  }
  text {
    color: #999;
  }
}
.filLists {
  width: 97%;
  margin: 13rpx 0px 0rpx 0%;
  height: 170rpx;
  background: #ffffff;
  box-shadow: 2px 4px 8px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20rpx;
  box-sizing: border-box;

  .filLists_img {
    width: 128rpx;
    height: 128rpx;
    border-radius: 5px;
  }
  .filLists1 {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 126rpx;
    justify-content: space-around;
    .filLists2 {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
      text {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 42rpx;
        letter-spacing: 2rpx;
      }
    }
    view:nth-of-type(2) {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text {
        font-size: 30rpx;
        font-weight: 400;
        line-height: 40rpx;
        letter-spacing: 2rpx;
      }
      text:nth-of-type(1) {
        color: #666666;
      }
      image {
        width: 26rpx;
        height: 24rpx;
        margin: 0px 10rpx 0px 20rpx;
      }
      text:nth-of-type(2) {
        color: #1b91ff;
      }
    }
    view:nth-of-type(3) {
      width: 100%;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 34rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
